import React, { Component } from "react";
import axios from 'axios'
import "./App.css";
import Header from './components/Header/Header'
import Content from './components/Content/Content'
class App extends Component {
  state = {
    userData:[],
    isFirst:true,
    isLoading:false,
    errorMsg:'',
  }
   inputDone = async (keyword) => {
    this.setState({isFirst:false,isLoading:true})
    try {
      const result  = await axios.get(`https://api.github.com/search/users?q=${keyword}`) 
      this.setState({isLoading:false})
      if(result.status === 200){
        let { data:{items}} = result
        this.setState({userData:items})
      }
    } catch (error) {
      this.setState({isLoading:false})
      this.setState({errorMsg:error})
    }
  
  }
  render() {
    return (
      <div className="search-wrapper">
        <Header handleInput={this.inputDone}></Header>
        <Content {...this.state}></Content>
      </div>
    );
  }
}

export default App;
